<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../react18/react.development.js"></script>
    <script src="../../react18/react-dom.development.js"></script>
    <script src="../../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <button>点击</button>
    <script type="text/babel">
      const vDom = (
        <ul>
          <li key="1">aaa</li>
          <li key="2">aaa1</li>
        </ul>
      );
      const vDoms = (
        <ul>
          <div>aaaa</div>
          <li key="2">aaa1</li>
          <li key="1">aaa</li>
          <p>aaaa</p>
        </ul>
      );

      /* 
        diff算法中的key属性：
        同层级中相同的节点 ，由于位置顺序发生变化，会导致进行很多低效的删除创建操作
        当某个节点添加了同级节点中位移的key属性 当它在当前层级的位置发生了变化后，react diff 算法通过新旧节点比较后(如果节点上有key属性，会先找寻对应的key)，如果发下了key值相同的新旧节点，就会先执行移动操作（然后依旧执行原有策略深入节点用diff算法比对），不会按照原有的顺序删除新建 而是移动
        循环遍历出来的index不适合作为这种场景下的节点的key属性值，因为每一个元素的index值会跟随结构的改变发生变化
        key使用的注意点
          key在列表中要唯一性（局部唯一性）
          key要具有稳定性(当前数据固定对应的唯一值)(注意如果有逆序修改数据，不要用index——渲染会重新排列)
            
      */

      const root = ReactDOM.createRoot(document.getElementById("app"));
      root.render(vDom);
      document.querySelector("button").onclick = function () {
        root.render(vDoms);
      };
    </script>
  </body>
</html>
